<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>CSS3练习</title>
<style>
/* #CSS3{
width: 100px;
height: 100px;
background: red;
-webkit-animation: myfirst 1s;
animation-direction:alternate;
animation-iteration-count:infinite;
} */
@-webkit-keyframes myfirst 
{
0%   {background: red;margin-left:0px;margin-top:0px;}
25%  {background: yellow;margin-left:800px;margin-top:0px;}
50%  {background: blue;margin-left:800px;margin-top:450px;}
75% {background: green;margin-left:0px;margin-top:450px;}
100% {background: green;margin-left:0px;margin-top:0px;}
}
/* {
0%   {background: red;width: 200px;height: 200px;margin-left:0px;margin-top:0px;}
25%  {background: yellow;width: 100px; height: 100px;margin-left:50px;margin-top:50px;}
50%  {background: blue;width: 50px; height: 50px;margin-left:80px;margin-top:80px;}
100% {background: green;width: 200px; height: 200px;margin-left:0px;margin-top:0px;}
} */
/* #d2{
width: 140px;
height: 100px;
background: green;
-webkit-animation: mysecond 5s;
}
@-webkit-keyframes mysecond 
{from {background:red;}
to {background:yellow;}
} */
#d2{
position: absolute;
left: 400px;
top: 300px;
transform-style: preserve-3d; 
perspective: 500px; 
}
#h5{
width: 100px;
height: 100px;
left: 350px;
top: 230px;
 -webkit-animation: mythird 1s linear;
 animation-iteration-count:infinite; 
 
   /* -webkit-transform: rotateX(60deg) ; */ 
 /*  -webkit-transform: rotateY(60deg);  */ 
 /* -webkit-transform: rotateZ(120deg); */ 
/*  -webkit-transform: skew(30deg,20deg); */
 /* transform-style: preserve-3d;  */
/*  transition:3s;  */
}
/* @-webkit-keyframes h5{
    0%{
        -webkit-transform:rotateY(0deg)
    }
    100%{
        -webkit-transform:rotateY(360deg)
    }
} */
@-webkit-keyframes mythird 
{
0%{
/* -webkit-transform: rotateX(30deg) ;*/
 -webkit-transform: rotateY(0deg);   
 transform-origin: left; 
 /*  -webkit-transform: rotateZ(30deg);  */ 
 /* -webkit-transform: skew(30deg,20deg); */
 /* perspective: 200px; */ 
 /* transform-style: preserve-3d;  */
  /* -webkit-transform: translateZ(150px); */
 }
 /* 50%{ */
 /* -webkit-transform: rotateX(60deg) ; */
  /*  -webkit-transform: rotateY(60deg);  
  transform-origin: left;  */
  /* -webkit-transform: rotateZ(180deg);  */ 
/* -webkit-transform: skew(60deg,60deg); */
 /* perspective: 200px;  */
 /* transform-style: preserve-3d;  */
  /* -webkit-transform: translateZ(300px); */
/*  } */
 100%{
 /* -webkit-transform: rotateX(80deg) ;*/ 
 -webkit-transform: rotateY(360deg);  
 transform-origin: left; 
 /* transform: translateZ(150px); */
  /* -webkit-transform: rotateZ(360deg);  */ 
 /* -webkit-transform: skew(120deg,20deg); */
 
 /* perspective: 200px; */
 /* transform-style: preserve-3d;  */
  /* -webkit-transform: translateZ(120px); */
 }
}
#h5{

}
#d3{

}
#h51{
/* -webkit-transform:translate(200px,150px); */
-webkit-transform: rotate(150deg);
-webkit-transform: scale(1,2);
-webkit-transform: skew(30deg,20deg);
}
</style>
</head>
<body>
<div id='d1'>
<span>d1</span>
 <img id='CSS3' src='ui/images/CSS3.png' alt='CSS3'></img> 
</div>
<div id='d2'>
<span>d2</span>
<img id='h5' src='ui/images/h5.png' alt='h5'></img> 
</div>
 <div id='d3'>
<img id='h51' src='ui/images/h5.png' alt='h51'></img> 
</div>
</body>
</html>